<script setup lang="ts">
defineOptions({
  // eslint-disable-next-line vue/no-reserved-component-names
  name: "Dashboard",
  inheritAttrs: false,
});

import { useUserStore } from "@/store/modules/user";
import { useTransition, TransitionPresets } from "@vueuse/core";
import {Audit, Income} from "@/api/dashboard/types";

/**
 * 待办事项
 */
const audit = reactive<Audit>({
  total: '100',
  finance: '10',
  client: '30',
  warehouse: '30',
  other: '30',
})
/**
 * 期初应收
 */
const income = reactive<Income>({
  total: '19975.56',
  tm: '1577.33',
  jd: '1873.44',
  dy: '1774.88',
  ks: '1994.23',
  other: '2776.15',
})
/**
 * 应收周期
 */
const incomeCircle = reactive<Income>({
  total: '27764.56',
  tm: '2677.33',
  jd: '1899.44',
  dy: '3641.88',
  ks: '1890.23',
  other: '2777.15',
})
/**
 * 应收余额
 */
const current = reactive<Income>({
  total: '19977.56',
  tm: '1677.33',
  jd: '2880.44',
  dy: '355.00',
  ks: '0',
  other: '144',
})
/**
 * 销售金额
 */
const sell = reactive<Income>({
  total: '37796.56',
  tm: '2874.33',
  jd: '5478.00',
  dy: '669.00',
  ks: '1904.03',
  other: '5212.44',
})
/**
 * 平台佣金
 */
const commission = reactive<Income>({
  total: '7780.22',
  tm: '1677.33',
  jd: '2880.44',
  dy: '355.00',
  ks: '0',
  other: '144',
})
/**
 * 营销费用
 */
const market = reactive<Income>({
  total: '19977.56',
  tm: '1677.33',
  jd: '2880.44',
  dy: '355.00',
  ks: '0',
  other: '144',
})
/**
 * 平台利润
 */
const profit = reactive<Income>({
  total: '19977.56',
  tm: '1677.33',
  jd: '2880.44',
  dy: '355.00',
  ks: '0',
  other: '144',
})
const userStore = useUserStore();

const date: Date = new Date();
const total = ref('1000.00')

const greetings = computed(() => {
  if (date.getHours() >= 6 && date.getHours() < 8) {
    return "晨起披衣出草堂，轩窗已自喜微凉🌅！";
  } else if (date.getHours() >= 8 && date.getHours() < 12) {
    return "上午好🌞！";
  } else if (date.getHours() >= 12 && date.getHours() < 18) {
    return "下午好☕！";
  } else if (date.getHours() >= 18 && date.getHours() < 24) {
    return "晚上好🌃！";
  } else if (date.getHours() >= 0 && date.getHours() < 6) {
    return "偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！";
  }
});

const duration = 5000;

// 收入金额
const amount = ref(0);
const amountOutput = useTransition(amount, {
  duration: duration,
  transition: TransitionPresets.easeOutExpo,
});
amount.value = 2000;

// 访问数
const visitCount = ref(0);
const visitCountOutput = useTransition(visitCount, {
  duration: duration,
  transition: TransitionPresets.easeOutExpo,
});
visitCount.value = 2000;

//消息数
const messageCount = ref(0);
const messageCountOutput = useTransition(messageCount, {
  duration: duration,
  transition: TransitionPresets.easeOutExpo,
});
messageCount.value = 2000;

// 订单数
const orderCount = ref(0);
const orderCountOutput = useTransition(orderCount, {
  duration: duration,
  transition: TransitionPresets.easeOutExpo,
});

function format_money(money: any) {
  const splitMoney = (money + '').replace(/\B(?=(\d{3})+(?!\d))/g, ',').split('.')
  if (splitMoney.length > 1) {
    return `${splitMoney[0]}.<span style="font-size:12px;">${splitMoney[1]}</span>`;
  }else{
    return `${splitMoney[0]}`;
  }
}

orderCount.value = 2000;
</script>

<template>
  <div class="dashboard-container">
    <!-- 待办事项 -->
    <el-row :gutter="40">
      <el-col>
          <el-row :gutter="40">
            <el-col :xs="22" :sm="12" :lg="4">
              <div class="data-box">
                <div
                        class="text-[#40c9c6] hover:!text-white hover:bg-[#40c9c6] p-3 rounded"
                >
                  <svg-icon icon-class="monitor" size="3em" />
                </div>
                <div class="flex flex-col space-y-3">
                  <div class="text-[var(--el-text-color-secondary)]">待办事项</div>
                  <div class="text-lg text-right">
                    {{ audit.total }}
                  </div>
                </div>
              </div>
            </el-col>

            <!--消息数-->
            <el-col :xs="22" :sm="12" :lg="5">
              <div class="data-box">
                <div
                        class="text-[#36a3f7] hover:!text-white hover:bg-[#36a3f7] p-3 rounded"
                >
                  <svg-icon icon-class="money" size="3em" />
                </div>
                <div class="flex flex-col space-y-3">
                  <div class="text-[var(--el-text-color-secondary)]">财务</div>
                  <div class="text-lg text-right">
                    {{ audit.finance }}
                  </div>
                </div>
              </div>
            </el-col>

            <el-col :xs="22" :sm="12" :lg="5">
              <div class="data-box">
                <div
                        class="text-[#f4516c] hover:!text-white hover:bg-[#f4516c] p-3 rounded"
                >
                  <svg-icon icon-class="message" size="3em" />
                </div>
                <div class="flex flex-col space-y-3">
                  <div class="text-[var(--el-text-color-secondary)]">客服</div>
                  <div class="text-lg text-right">
                    {{ audit.client }}
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :xs="22" :sm="12" :lg="5">
              <div class="data-box">
                <div
                        class="text-[#34bfa3] hover:!text-white hover:bg-[#34bfa3] p-3 rounded"
                >
                  <svg-icon icon-class="homepage" size="3em" />
                </div>
                <div class="flex flex-col space-y-3">
                  <div class="text-[var(--el-text-color-secondary)]">仓库</div>
                  <div class="text-lg text-right">
                    {{ audit.warehouse }}
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :xs="22" :sm="12" :lg="5">
              <div class="data-box">
                <div
                        class="text-[#34bfa3] hover:!text-white hover:bg-[#34bfa3] p-3 rounded"
                >
                  <svg-icon icon-class="menu" size="3em" />
                </div>
                <div class="flex flex-col space-y-3">
                  <div class="text-[var(--el-text-color-secondary)]">其他部门</div>
                  <div class="text-lg text-right">
                    {{ audit.other }}
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
      </el-col>
    </el-row>
    <el-divider content-position="left" style="background-color: floralwhite;height:2px;">期初应收</el-divider>
    <!-- 期初应收 -->
    <el-row :gutter="40">
      <el-col>
          <el-row :gutter="40" class="mb-4">
            <el-col :xs="22" :sm="12" :lg="4" class="mb-2">
              <div class="data-box-qcys">
                <div class="text-[#40c9c6] rounded" style="position: relative; width: 36%;">
                  <img src="@/assets/qcys.png" class="qcys-img">
                </div>
                <div class="flex flex-col space-y-3">
                  <div class="text-[var(--el-text-color-secondary)]">合计</div>
                  <div class="text-lg text-right" v-html="format_money(income.total)">

                  </div>
                </div>
              </div>
            </el-col>

            <!--天猫-->
            <el-col :xs="22" :sm="12" :lg="4" class="mb-2">
              <div class="data-box-qcys">
                <div class="text-[#40c9c6] rounded" style="position: relative; width: 36%;">
                  <img src="@/assets/tm.png" class="qcys-img">
                </div>
                <div class="flex flex-col space-y-3">
                  <div class="text-[var(--el-text-color-secondary)]">天猫</div>
                  <div class="text-lg text-right" v-html="format_money(income.tm)">
                  </div>
                </div>
              </div>
            </el-col>
            <!--京东-->
            <el-col :xs="22" :sm="12" :lg="4" class="mb-2">
              <div class="data-box-qcys">
                <div class="text-[#40c9c6] rounded" style="position: relative; width: 36%;">
                  <img src="@/assets/jd.jfif" class="qcys-img">
                </div>
                <div class="flex flex-col space-y-3">
                  <div class="text-[var(--el-text-color-secondary)]">京东</div>
                  <div class="text-lg text-right" v-html="format_money(income.jd)">
                  </div>
                </div>
              </div>
            </el-col>
            <!--抖音-->
            <el-col :xs="22" :sm="12" :lg="4" class="mb-2">
              <div class="data-box-qcys">
                <div class="text-[#40c9c6] rounded" style="position: relative; width: 36%;">
                  <img src="@/assets/dy.png" class="qcys-img">
                </div>
                <div class="flex flex-col space-y-3">
                  <div class="text-[var(--el-text-color-secondary)]">抖音</div>
                  <div class="text-lg text-right" v-html="format_money(income.dy)">
                  </div>
                </div>
              </div>
            </el-col>
            <!--快手-->
            <el-col :xs="22" :sm="12" :lg="4" class="mb-2">
              <div class="data-box-qcys">
                <div class="text-[#40c9c6] rounded" style="position: relative; width: 36%;">
                  <img src="@/assets/ks.jpeg" class="qcys-img">
                </div>
                <div class="flex flex-col space-y-3">
                  <div class="text-[var(--el-text-color-secondary)]">快手</div>
                  <div class="text-lg text-right" v-html="format_money(income.ks)">
                  </div>
                </div>
              </div>
            </el-col>
            <!--其他平台-->
            <el-col :xs="22" :sm="12" :lg="4" class="mb-2">
              <div class="data-box">
                <div
                        class="text-[#34bfa3] hover:!text-white hover:bg-[#34bfa3] p-3 rounded"
                >
                  <svg-icon icon-class="menu" size="3em" />
                </div>
                <div class="flex flex-col space-y-3">
                  <div class="text-[var(--el-text-color-secondary)]">其他平台</div>
                  <div class="text-lg text-right" v-html="format_money(income.other)">
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
      </el-col>
    </el-row>
    <el-divider content-position="left" style="background-color: floralwhite;height:2px;margin-top:0px;">应收周期</el-divider>
    <!-- 应收周期 -->
    <el-row :gutter="40">
      <el-col>
        <el-row :gutter="40" class="mb-4">
          <el-col :xs="22" :sm="12" :lg="4" class="mb-2">
            <div class="data-box-qcys">
              <div class="text-[#40c9c6] rounded" style="position: relative; width: 36%;">
                <img src="@/assets/qcys.png" class="qcys-img">
              </div>
              <div class="flex flex-col space-y-3">
                <div class="text-[var(--el-text-color-secondary)]">合计</div>
                <div class="text-lg text-right" v-html="format_money(incomeCircle.total)">

                </div>
              </div>
            </div>
          </el-col>

          <!--天猫-->
          <el-col :xs="22" :sm="12" :lg="4" class="mb-2">
            <div class="data-box-qcys">
              <div class="text-[#40c9c6] rounded" style="position: relative; width: 36%;">
                <img src="@/assets/tm.png" class="qcys-img">
              </div>
              <div class="flex flex-col space-y-3">
                <div class="text-[var(--el-text-color-secondary)]">天猫</div>
                <div class="text-lg text-right" v-html="format_money(incomeCircle.tm)">
                </div>
              </div>
            </div>
          </el-col>
          <!--京东-->
          <el-col :xs="22" :sm="12" :lg="4" class="mb-2">
            <div class="data-box-qcys">
              <div class="text-[#40c9c6] rounded" style="position: relative; width: 36%;">
                <img src="@/assets/jd.jfif" class="qcys-img">
              </div>
              <div class="flex flex-col space-y-3">
                <div class="text-[var(--el-text-color-secondary)]">京东</div>
                <div class="text-lg text-right" v-html="format_money(incomeCircle.jd)">
                </div>
              </div>
            </div>
          </el-col>
          <!--抖音-->
          <el-col :xs="22" :sm="12" :lg="4" class="mb-2">
            <div class="data-box-qcys">
              <div class="text-[#40c9c6] rounded" style="position: relative; width: 36%;">
                <img src="@/assets/dy.png" class="qcys-img">
              </div>
              <div class="flex flex-col space-y-3">
                <div class="text-[var(--el-text-color-secondary)]">抖音</div>
                <div class="text-lg text-right" v-html="format_money(incomeCircle.dy)">
                </div>
              </div>
            </div>
          </el-col>
          <!--快手-->
          <el-col :xs="22" :sm="12" :lg="4" class="mb-2">
            <div class="data-box-qcys">
              <div class="text-[#40c9c6] rounded" style="position: relative; width: 36%;">
                <img src="@/assets/ks.jpeg" class="qcys-img">
              </div>
              <div class="flex flex-col space-y-3">
                <div class="text-[var(--el-text-color-secondary)]">快手</div>
                <div class="text-lg text-right" v-html="format_money(incomeCircle.ks)">
                </div>
              </div>
            </div>
          </el-col>
          <!--其他平台-->
          <el-col :xs="22" :sm="12" :lg="4" class="mb-2">
            <div class="data-box">
              <div
                      class="text-[#34bfa3] hover:!text-white hover:bg-[#34bfa3] p-3 rounded"
              >
                <svg-icon icon-class="menu" size="3em" />
              </div>
              <div class="flex flex-col space-y-3">
                <div class="text-[var(--el-text-color-secondary)]">其他平台</div>
                <div class="text-lg text-right" v-html="format_money(incomeCircle.other)">
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-divider content-position="left" style="background-color: floralwhite;height:2px;margin-top:0px;">本期发生</el-divider>
    <!-- 本期发生 -->
    <el-row :gutter="40">
      <el-col>
        <el-row :gutter="40" class="mb-4">
          <el-col :xs="22" :sm="12" :lg="4" class="mb-2">
            <div class="data-box-qcys">
              <div class="text-[#40c9c6] rounded" style="position: relative; width: 36%;">
                <img src="@/assets/qcys.png" class="qcys-img">
              </div>
              <div class="flex flex-col space-y-3">
                <div class="text-[var(--el-text-color-secondary)]">应收余额</div>
                <div class="text-lg text-right" v-html="format_money(current.total)">

                </div>
              </div>
            </div>
          </el-col>

          <!--天猫-->
          <el-col :xs="22" :sm="12" :lg="4" class="mb-2">
            <div class="data-box-qcys">
              <div class="text-[#40c9c6] rounded" style="position: relative; width: 36%;">
                <img src="@/assets/tm.png" class="qcys-img">
              </div>
              <div class="flex flex-col space-y-3">
                <div class="text-[var(--el-text-color-secondary)]">天猫</div>
                <div class="text-lg text-right" v-html="format_money(current.tm)">
                </div>
              </div>
            </div>
          </el-col>
          <!--京东-->
          <el-col :xs="22" :sm="12" :lg="4" class="mb-2">
            <div class="data-box-qcys">
              <div class="text-[#40c9c6] rounded" style="position: relative; width: 36%;">
                <img src="@/assets/jd.jfif" class="qcys-img">
              </div>
              <div class="flex flex-col space-y-3">
                <div class="text-[var(--el-text-color-secondary)]">京东</div>
                <div class="text-lg text-right" v-html="format_money(current.jd)">
                </div>
              </div>
            </div>
          </el-col>
          <!--抖音-->
          <el-col :xs="22" :sm="12" :lg="4" class="mb-2">
            <div class="data-box-qcys">
              <div class="text-[#40c9c6] rounded" style="position: relative; width: 36%;">
                <img src="@/assets/dy.png" class="qcys-img">
              </div>
              <div class="flex flex-col space-y-3">
                <div class="text-[var(--el-text-color-secondary)]">抖音</div>
                <div class="text-lg text-right" v-html="format_money(current.dy)">
                </div>
              </div>
            </div>
          </el-col>
          <!--快手-->
          <el-col :xs="22" :sm="12" :lg="4" class="mb-2">
            <div class="data-box-qcys">
              <div class="text-[#40c9c6] rounded" style="position: relative; width: 36%;">
                <img src="@/assets/ks.jpeg" class="qcys-img">
              </div>
              <div class="flex flex-col space-y-3">
                <div class="text-[var(--el-text-color-secondary)]">快手</div>
                <div class="text-lg text-right" v-html="format_money(current.ks)">
                </div>
              </div>
            </div>
          </el-col>
          <!--其他平台-->
          <el-col :xs="22" :sm="12" :lg="4" class="mb-2">
            <div class="data-box">
              <div
                      class="text-[#34bfa3] hover:!text-white hover:bg-[#34bfa3] p-3 rounded"
              >
                <svg-icon icon-class="menu" size="3em" />
              </div>
              <div class="flex flex-col space-y-3">
                <div class="text-[var(--el-text-color-secondary)]">其他平台</div>
                <div class="text-lg text-right" v-html="format_money(current.other)">
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <!-- 销售金额 -->
    <el-row :gutter="40">
      <el-col>
        <el-row :gutter="40" class="mb-4">
          <el-col :xs="22" :sm="12" :lg="4" class="mb-2">
            <div class="data-box-qcys">
              <div class="text-[#40c9c6] rounded" style="position: relative; width: 36%;">
                <img src="@/assets/qcys.png" class="qcys-img">
              </div>
              <div class="flex flex-col space-y-3">
                <div class="text-[var(--el-text-color-secondary)]">销售金额</div>
                <div class="text-lg text-right" v-html="format_money(sell.total)">

                </div>
              </div>
            </div>
          </el-col>

          <!--天猫-->
          <el-col :xs="22" :sm="12" :lg="4" class="mb-2">
            <div class="data-box-qcys">
              <div class="text-[#40c9c6] rounded" style="position: relative; width: 36%;">
                <img src="@/assets/tm.png" class="qcys-img">
              </div>
              <div class="flex flex-col space-y-3">
                <div class="text-[var(--el-text-color-secondary)]">天猫</div>
                <div class="text-lg text-right" v-html="format_money(sell.tm)">
                </div>
              </div>
            </div>
          </el-col>
          <!--京东-->
          <el-col :xs="22" :sm="12" :lg="4" class="mb-2">
            <div class="data-box-qcys">
              <div class="text-[#40c9c6] rounded" style="position: relative; width: 36%;">
                <img src="@/assets/jd.jfif" class="qcys-img">
              </div>
              <div class="flex flex-col space-y-3">
                <div class="text-[var(--el-text-color-secondary)]">京东</div>
                <div class="text-lg text-right" v-html="format_money(sell.jd)">
                </div>
              </div>
            </div>
          </el-col>
          <!--抖音-->
          <el-col :xs="22" :sm="12" :lg="4" class="mb-2">
            <div class="data-box-qcys">
              <div class="text-[#40c9c6] rounded" style="position: relative; width: 36%;">
                <img src="@/assets/dy.png" class="qcys-img">
              </div>
              <div class="flex flex-col space-y-3">
                <div class="text-[var(--el-text-color-secondary)]">抖音</div>
                <div class="text-lg text-right" v-html="format_money(sell.dy)">
                </div>
              </div>
            </div>
          </el-col>
          <!--快手-->
          <el-col :xs="22" :sm="12" :lg="4" class="mb-2">
            <div class="data-box-qcys">
              <div class="text-[#40c9c6] rounded" style="position: relative; width: 36%;">
                <img src="@/assets/ks.jpeg" class="qcys-img">
              </div>
              <div class="flex flex-col space-y-3">
                <div class="text-[var(--el-text-color-secondary)]">快手</div>
                <div class="text-lg text-right" v-html="format_money(sell.ks)">
                </div>
              </div>
            </div>
          </el-col>
          <!--其他平台-->
          <el-col :xs="22" :sm="12" :lg="4" class="mb-2">
            <div class="data-box">
              <div
                      class="text-[#34bfa3] hover:!text-white hover:bg-[#34bfa3] p-3 rounded"
              >
                <svg-icon icon-class="menu" size="3em" />
              </div>
              <div class="flex flex-col space-y-3">
                <div class="text-[var(--el-text-color-secondary)]">其他平台</div>
                <div class="text-lg text-right" v-html="format_money(sell.other)">
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <!-- 平台佣金 -->
    <el-row :gutter="40">
      <el-col>
        <el-row :gutter="40" class="mb-4">
          <el-col :xs="22" :sm="12" :lg="4" class="mb-2">
            <div class="data-box-qcys">
              <div class="text-[#40c9c6] rounded" style="position: relative; width: 36%;">
                <img src="@/assets/qcys.png" class="qcys-img">
              </div>
              <div class="flex flex-col space-y-3">
                <div class="text-[var(--el-text-color-secondary)]">平台佣金</div>
                <div class="text-lg text-right" v-html="format_money(commission.total)">

                </div>
              </div>
            </div>
          </el-col>

          <!--天猫-->
          <el-col :xs="22" :sm="12" :lg="4" class="mb-2">
            <div class="data-box-qcys">
              <div class="text-[#40c9c6] rounded" style="position: relative; width: 36%;">
                <img src="@/assets/tm.png" class="qcys-img">
              </div>
              <div class="flex flex-col space-y-3">
                <div class="text-[var(--el-text-color-secondary)]">天猫</div>
                <div class="text-lg text-right" v-html="format_money(commission.tm)">
                </div>
              </div>
            </div>
          </el-col>
          <!--京东-->
          <el-col :xs="22" :sm="12" :lg="4" class="mb-2">
            <div class="data-box-qcys">
              <div class="text-[#40c9c6] rounded" style="position: relative; width: 36%;">
                <img src="@/assets/jd.jfif" class="qcys-img">
              </div>
              <div class="flex flex-col space-y-3">
                <div class="text-[var(--el-text-color-secondary)]">京东</div>
                <div class="text-lg text-right" v-html="format_money(commission.jd)">
                </div>
              </div>
            </div>
          </el-col>
          <!--抖音-->
          <el-col :xs="22" :sm="12" :lg="4" class="mb-2">
            <div class="data-box-qcys">
              <div class="text-[#40c9c6] rounded" style="position: relative; width: 36%;">
                <img src="@/assets/dy.png" class="qcys-img">
              </div>
              <div class="flex flex-col space-y-3">
                <div class="text-[var(--el-text-color-secondary)]">抖音</div>
                <div class="text-lg text-right" v-html="format_money(commission.dy)">
                </div>
              </div>
            </div>
          </el-col>
          <!--快手-->
          <el-col :xs="22" :sm="12" :lg="4" class="mb-2">
            <div class="data-box-qcys">
              <div class="text-[#40c9c6] rounded" style="position: relative; width: 36%;">
                <img src="@/assets/ks.jpeg" class="qcys-img">
              </div>
              <div class="flex flex-col space-y-3">
                <div class="text-[var(--el-text-color-secondary)]">快手</div>
                <div class="text-lg text-right" v-html="format_money(commission.ks)">
                </div>
              </div>
            </div>
          </el-col>
          <!--其他平台-->
          <el-col :xs="22" :sm="12" :lg="4" class="mb-2">
            <div class="data-box">
              <div
                      class="text-[#34bfa3] hover:!text-white hover:bg-[#34bfa3] p-3 rounded"
              >
                <svg-icon icon-class="menu" size="3em" />
              </div>
              <div class="flex flex-col space-y-3">
                <div class="text-[var(--el-text-color-secondary)]">其他平台</div>
                <div class="text-lg text-right" v-html="format_money(commission.other)">
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <!-- 营销费用 -->
    <el-row :gutter="40">
      <el-col>
        <el-row :gutter="40" class="mb-4">
          <el-col :xs="22" :sm="12" :lg="4" class="mb-2">
            <div class="data-box-qcys">
              <div class="text-[#40c9c6] rounded" style="position: relative; width: 36%;">
                <img src="@/assets/qcys.png" class="qcys-img">
              </div>
              <div class="flex flex-col space-y-3">
                <div class="text-[var(--el-text-color-secondary)]">营销费用</div>
                <div class="text-lg text-right" v-html="format_money(market.total)">

                </div>
              </div>
            </div>
          </el-col>

          <!--天猫-->
          <el-col :xs="22" :sm="12" :lg="4" class="mb-2">
            <div class="data-box-qcys">
              <div class="text-[#40c9c6] rounded" style="position: relative; width: 36%;">
                <img src="@/assets/tm.png" class="qcys-img">
              </div>
              <div class="flex flex-col space-y-3">
                <div class="text-[var(--el-text-color-secondary)]">天猫</div>
                <div class="text-lg text-right" v-html="format_money(market.tm)">
                </div>
              </div>
            </div>
          </el-col>
          <!--京东-->
          <el-col :xs="22" :sm="12" :lg="4" class="mb-2">
            <div class="data-box-qcys">
              <div class="text-[#40c9c6] rounded" style="position: relative; width: 36%;">
                <img src="@/assets/jd.jfif" class="qcys-img">
              </div>
              <div class="flex flex-col space-y-3">
                <div class="text-[var(--el-text-color-secondary)]">京东</div>
                <div class="text-lg text-right" v-html="format_money(market.jd)">
                </div>
              </div>
            </div>
          </el-col>
          <!--抖音-->
          <el-col :xs="22" :sm="12" :lg="4" class="mb-2">
            <div class="data-box-qcys">
              <div class="text-[#40c9c6] rounded" style="position: relative; width: 36%;">
                <img src="@/assets/dy.png" class="qcys-img">
              </div>
              <div class="flex flex-col space-y-3">
                <div class="text-[var(--el-text-color-secondary)]">抖音</div>
                <div class="text-lg text-right" v-html="format_money(market.dy)">
                </div>
              </div>
            </div>
          </el-col>
          <!--快手-->
          <el-col :xs="22" :sm="12" :lg="4" class="mb-2">
            <div class="data-box-qcys">
              <div class="text-[#40c9c6] rounded" style="position: relative; width: 36%;">
                <img src="@/assets/ks.jpeg" class="qcys-img">
              </div>
              <div class="flex flex-col space-y-3">
                <div class="text-[var(--el-text-color-secondary)]">快手</div>
                <div class="text-lg text-right" v-html="format_money(market.ks)">
                </div>
              </div>
            </div>
          </el-col>
          <!--其他平台-->
          <el-col :xs="22" :sm="12" :lg="4" class="mb-2">
            <div class="data-box">
              <div
                      class="text-[#34bfa3] hover:!text-white hover:bg-[#34bfa3] p-3 rounded"
              >
                <svg-icon icon-class="menu" size="3em" />
              </div>
              <div class="flex flex-col space-y-3">
                <div class="text-[var(--el-text-color-secondary)]">其他平台</div>
                <div class="text-lg text-right" v-html="format_money(market.other)">
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <!-- 平台利润 -->
    <el-row :gutter="40">
      <el-col>
        <el-row :gutter="40" class="mb-4">
          <el-col :xs="22" :sm="12" :lg="4" class="mb-2">
            <div class="data-box-qcys">
              <div class="text-[#40c9c6] rounded" style="position: relative; width: 36%;">
                <img src="@/assets/qcys.png" class="qcys-img">
              </div>
              <div class="flex flex-col space-y-3">
                <div class="text-[var(--el-text-color-secondary)]">平台利润</div>
                <div class="text-lg text-right" v-html="format_money(profit.total)">

                </div>
              </div>
            </div>
          </el-col>

          <!--天猫-->
          <el-col :xs="22" :sm="12" :lg="4" class="mb-2">
            <div class="data-box-qcys">
              <div class="text-[#40c9c6] rounded" style="position: relative; width: 36%;">
                <img src="@/assets/tm.png" class="qcys-img">
              </div>
              <div class="flex flex-col space-y-3">
                <div class="text-[var(--el-text-color-secondary)]">天猫</div>
                <div class="text-lg text-right" v-html="format_money(profit.tm)">
                </div>
              </div>
            </div>
          </el-col>
          <!--京东-->
          <el-col :xs="22" :sm="12" :lg="4" class="mb-2">
            <div class="data-box-qcys">
              <div class="text-[#40c9c6] rounded" style="position: relative; width: 36%;">
                <img src="@/assets/jd.jfif" class="qcys-img">
              </div>
              <div class="flex flex-col space-y-3">
                <div class="text-[var(--el-text-color-secondary)]">京东</div>
                <div class="text-lg text-right" v-html="format_money(profit.jd)">
                </div>
              </div>
            </div>
          </el-col>
          <!--抖音-->
          <el-col :xs="22" :sm="12" :lg="4" class="mb-2">
            <div class="data-box-qcys">
              <div class="text-[#40c9c6] rounded" style="position: relative; width: 36%;">
                <img src="@/assets/dy.png" class="qcys-img">
              </div>
              <div class="flex flex-col space-y-3">
                <div class="text-[var(--el-text-color-secondary)]">抖音</div>
                <div class="text-lg text-right" v-html="format_money(profit.dy)">
                </div>
              </div>
            </div>
          </el-col>
          <!--快手-->
          <el-col :xs="22" :sm="12" :lg="4" class="mb-2">
            <div class="data-box-qcys">
              <div class="text-[#40c9c6] rounded" style="position: relative; width: 36%;">
                <img src="@/assets/ks.jpeg" class="qcys-img">
              </div>
              <div class="flex flex-col space-y-3">
                <div class="text-[var(--el-text-color-secondary)]">快手</div>
                <div class="text-lg text-right" v-html="format_money(profit.ks)">
                </div>
              </div>
            </div>
          </el-col>
          <!--其他平台-->
          <el-col :xs="22" :sm="12" :lg="4" class="mb-2">
            <div class="data-box">
              <div
                      class="text-[#34bfa3] hover:!text-white hover:bg-[#34bfa3] p-3 rounded"
              >
                <svg-icon icon-class="menu" size="3em" />
              </div>
              <div class="flex flex-col space-y-3">
                <div class="text-[var(--el-text-color-secondary)]">其他平台</div>
                <div class="text-lg text-right" v-html="format_money(profit.other)">
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-divider style="background-color: floralwhite;height:2px;margin-top:0px;"/>
  </div>
</template>

<style lang="scss" scoped>
.dashboard-container {
  position: relative;
  padding: 24px;

  .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .github-corner {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 99;
    border: 0;
  }

  .data-box {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    font-weight: bold;
    color: var(--el-text-color-regular);
    background: var(--el-bg-color-overlay);
    border-color: var(--el-border-color);
    box-shadow: var(--el-box-shadow-dark);
    border-radius: 3%;
  }

  .svg-icon {
    fill: currentcolor !important;
  }

  .data-box-qcys {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    font-weight: bold;
    color: var(--el-text-color-regular);
    background: var(--el-bg-color-overlay);
    border-color: var(--el-border-color);
    box-shadow: var(--el-box-shadow-dark);
    border-radius: 3%;
    height: 100%;
  }

  .qcys-img{
    max-width: 100%;
    height: auto;
    position: absolute;
  }
}
</style>
